import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Tabs, Card, Pagination, Row, Col, Modal } from 'antd';

const confirm = Modal.confirm;
import { toJS } from 'mobx';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import { WeaRightMenu, WeaTop, WeaTab, WeaErrorPage, WeaBrowser, WeaTools, WeaAlertPage } from 'ecCom';
import { locale } from 'moment';
import { Condition, getAdButtons } from '../list/listCondition';
import InstockCheckInfoDialog from './InstockCheckInfoDialog';

import CheckList from './CheckList';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('cptInstockCheckStore')
@observer
class InstockCheck extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.doInit(this.props);
  }
  doInit(props) {
    const { location, cptInstockCheckStore } = props;
    const { initInstockCheckList } = cptInstockCheckStore;
    initInstockCheckList();
  }
  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    // 点击菜单路由刷新组件
    if (keyOld !== keyNew) {
      const { location, cptInstockCheckStore } = nextProps;
      const { initInstockCheckList } = cptInstockCheckStore;
      cptInstockCheckStore.clearStatus();
      initInstockCheckList();
    }
  }
  componentWillUnmount() {
    const { cptInstockCheckStore } = this.props;
    cptInstockCheckStore.clearStatus();
  }
  render() {
    const { cptInstockCheckStore, location } = this.props;
    const { loading, tableStore, checkTableStore, showSearchAd, form, searchParams, hasRight, verified } = cptInstockCheckStore;

    const title = getLabel(15307, '入库验收');
    const topTab = [
      { title: getLabel(15307, '入库验收'), key: '0' },
      { title: getLabel(127861, '历史验收记录'), key: '1' },
    ];
    const formParams = form.getFormParams() || {};
    if (verified && !hasRight) {
      return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@pek3vu`} >
        <div style={{ color: '#000' }}>
          {getLabel(2012, '对不起，您暂时没有权限！')}
        </div>
      </WeaAlertPage>
      );
    }
    if (verified && hasRight) {
      return (
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mjr5af`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)} >
          <WeaTop
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@lx9cln`}
            title={title}
            loading={loading}
            icon={<i className="icon-coms-fa" />}
            iconBgcolor="#f14a2d"
            buttons={this.getTopButtons()}
            buttonSpace={10}
            showDropIcon
            dropMenuDatas={this.getRightMenu()}
            onDropMenuClick={this.onRightMenuClick.bind(this)}
          >

            <WeaTab
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@tcu0n7`}
              datas={topTab}
              keyParam="key" // 主键
              selectedKey={searchParams.tabkey}
              buttonsAd={searchParams.tabkey == '1' && getAdButtons(cptInstockCheckStore)}
              searchType={searchParams.tabkey == '1' && ['advanced']}
              searchsBaseValue={formParams.prjname}
              setShowSearchAd={(bool) => { cptInstockCheckStore.setShowSearchAd(bool); }}
              hideSearchAd={() => cptInstockCheckStore.setShowSearchAd(false)}
              searchsAd={
                <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@lq4vys`} listStore={cptInstockCheckStore} form={form} onEnterSearch={this.onEnterSearch} /></div>
              }
              showSearchAd={showSearchAd}
              onChange={(key) => { cptInstockCheckStore.changeTab(key); }}
            />
            {
              searchParams.tabkey == '0' ? <CheckList ecId={`${this && this.props && this.props.ecId || ''}_CheckList@nqvkko`} />
                : <WeaTable
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@f3l4hp`}
                  comsWeaTableStore={tableStore}
                  hasOrder
                  needScroll
                  getColumns={c => this.reRenderColumns(c)}
                  onOperatesClick={this.onOperatesClick.bind(this)}
                />
            }
          </WeaTop>
          <InstockCheckInfoDialog ecId={`${this && this.props && this.props.ecId || ''}_InstockCheckInfoDialog@8pfrnh`} contentStore={cptInstockCheckStore} />
        </WeaRightMenu>);
    }
    return <div />;
  }
  getTopButtons() {
    const { cptInstockCheckStore } = this.props;
    const { searchParams, tableStore, checkTableStore, getBatchInstock, ismanager } = cptInstockCheckStore;
    const selectedLen = checkTableStore.selectedRowKeys.length;
    const selectedLen1 = tableStore.selectedRowKeys.length;
    const btnArr = [];
    const that = this;
    { searchParams.tabkey == '0' && btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@36gi50@submit`} type="primary" disabled={selectedLen <= 0} onClick={that.batchInstock}>{getLabel(127970, '批量验收')}</Button>); }
    { searchParams.tabkey == '1' && ismanager && btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@o5w4j5@delete`} type="primary" disabled={selectedLen1 <= 0} onClick={() => { that.batchDeleteClick(); }}>{getLabel(32136, '批量删除') }</Button>); }
    return btnArr;
  }

  getRightMenu() {
    const { cptInstockCheckStore } = this.props;
    const { searchParams, tableStore, checkTableStore, ismanager } = cptInstockCheckStore;
    const selectedLen = checkTableStore.selectedRowKeys.length;
    const selectedLen1 = tableStore.selectedRowKeys.length;
    const btnArr = [];
    {
      searchParams.tabkey == '0' &&
            btnArr.push({
              icon: <i className="icon-coms-batch" />,
              content: getLabel(127970, '批量验收'),
              disabled: selectedLen <= 0,
              key: '0',
            });
    }
    {
      searchParams.tabkey == '1' && ismanager &&
            btnArr.push({
              icon: <i className="icon-coms-batch" />,
              content: getLabel(32136, '批量删除'),
              disabled: selectedLen1 <= 0,
              key: '1',
            });
    }
    btnArr.push({
      icon: <i className={'icon-coms-Custom'} />,
      content: getLabel(32535, '显示定制列'),
      key: '2',
    });

    	return btnArr;
  }
  onRightMenuClick(key) {
    const { cptInstockCheckStore } = this.props;
    const { getBatchInstock } = cptInstockCheckStore;
    const that = this;
    if (key == '0') { // 提交
      this.batchInstock();
    }
    if (key == '1') {
      that.batchDeleteClick();
    }
    if (key == '2') { // 显示定制列
      cptInstockCheckStore.showColumn();
    }
  }

    batchInstock=() => {
      const { cptInstockCheckStore } = this.props;
      const { searchParams, checkTableStore, showInstockCheckInfo } = cptInstockCheckStore;
      const selectedKeys = checkTableStore.selectedRowKeys;
      const ids = `${toJS(selectedKeys)}`;
      Modal.confirm({
        title: getLabel(15172, '系统提示'),
        content: getLabel(83692, '您确认要批量处理选中的记录吗？'),
        onOk() {
          showInstockCheckInfo(true, { instockid: ids, viewtype: 'batch' }, 0);
        },
        onCancel() {},
      });
    }

    batchDeleteClick = () => { // 批量删除
      const { cptInstockCheckStore } = this.props;
      const { tableStore } = cptInstockCheckStore;
      Modal.confirm({
        title: getLabel(15172, '系统提示'),
        content: getLabel(83692, '您确认要批量处理选中的记录吗？'),
        onOk() {
          cptInstockCheckStore.doDelete({ instockid: tableStore.selectedRowKeys });
        },
        onCancel() { },
      });
    }

    onOperatesClick(record, index, operate, flag) {
      const { cptInstockCheckStore } = this.props;
      if (flag == '0') { // 明细
        cptInstockCheckStore.showInstockCheckInfo(true, { instockid: record.randomFieldId, viewtype: 'view' }, 1);
      } else if (flag == '1') { // 删除
        confirm({
          title: getLabel(15172, '系统提示'),
          content: getLabel(83600, '您确认要删除吗?'),
          onOk() {
            cptInstockCheckStore.doDelete({ instockid: record.randomFieldId });
          },
          onCancel() { },
        });
      }
    }
    reRenderColumns(columns) {
      const { cptInstockCheckStore } = this.props;
      columns.forEach((c) => {
        if (c.dataIndex == 'tmpid') {
          c.render = function (text, record) {
            const valueSpan = record[`${c.dataIndex}span`] !== undefined ? record[`${c.dataIndex}span`] : record[c.dataIndex];
            return <a onClick={() => { cptInstockCheckStore.showInstockCheckInfo(true, { instockid: record.tmpid, viewtype: 'view' }, 1); }}>{valueSpan}</a>;
          };
        } else {
          c.render = function (text, record) {
            const valueSpan = record[`${c.dataIndex}span`] !== undefined ? record[`${c.dataIndex}span`] : record[c.dataIndex];
            return <span dangerouslySetInnerHTML={{ __html: valueSpan }} />;
          };
        }
      });
      return columns;
    }

    onEnterSearch = () =>{
      const { cptInstockCheckStore } = this.props;
      cptInstockCheckStore.doSearch();
      cptInstockCheckStore.setShowSearchAd(false);
    }

}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@9sioyy`} msg={props.error ? props.error : getLabel(383324, '对不起，该页面异常，请联系管理员')} />,
  { error: '' },
)(InstockCheck);
